<template>
  <div class="settings-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色管理" name="setting" class="tab-pane">
            <div v-if="activeName === 'setting'">
              <!-- 单独一行设置添加角色 -->
              <el-row>
                <el-button class="add-btn" @click="showDialog">添加角色</el-button>
              </el-row>
              <!-- 渲染表格数据 -->
              <el-table :data="rolesList" style="width: 100%">
                <el-table-column type="index" label="#" width="50"> </el-table-column>
                <el-table-column prop="name" label="姓名" width="280"> </el-table-column>
                <el-table-column prop="description" label="描述"> </el-table-column>
                <!-- 自定义列模板 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据. -->
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      class="edit-btn"
                      @click="handleEdit(scope.$index, scope.row)"
                      >编辑
                    </el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      class="danger-btn"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <el-pagination
                class="pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.page"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="company" class="tab-pane"
            ><div v-if="activeName === 'company'">
              <div class="warning">
                <i class="el-icon-wind-power"></i>具有超级管理员权限才能修改公司信息
              </div>
              <el-form :model="companyInfo" label-width="120px" style="margin-top: 20px">
                <el-form-item label="公司名称">
                  <el-input v-model="companyInfo.name" disabled style="width: 500px" />
                </el-form-item>
                <el-form-item label="公司地址">
                  <el-input v-model="companyInfo.companyAddress" disabled style="width: 500px" />
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="companyInfo.mailbox" disabled style="width: 500px" />
                </el-form-item>
                <el-form-item label="备注">
                  <el-input
                    v-model="companyInfo.remarks"
                    type="textarea"
                    :rows="3"
                    disabled
                    style="width: 500px"
                  />
                </el-form-item>
              </el-form></div
          ></el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!-- 弹窗组件 -->
    <SettingDialog
      ref="settingDialog"
      :dialogFormVisible.sync="dialogFormVisible"
      @addRole="addRole"
    ></SettingDialog>
  </div>
</template>

<script>
import {
  getSysRole,
  addSysRole,
  getRoleInfo,
  editRoleInfo,
  deleteRole,
  getCompanyInfo,
} from '@/api'
import { mapGetters } from 'vuex'
import SettingDialog from './cpns/settingDialog.vue'
export default {
  name: 'settings',
  data() {
    return {
      activeName: 'setting',
      rolesList: [],
      companyInfo: {},
      total: 0,
      dialogFormVisible: false,
      isEdit: false,
      query: {
        page: 1,
        pagesize: 10,
      },
    }
  },
  created() {
    this.getRolesList()
    this.fatchCompanyInfo()
  },
  methods: {
    // 获取用户角色列表
    async getRolesList() {
      const { data: res } = await getSysRole(this.query)
      console.log(res)
      this.rolesList = res.rows
      this.total = res.total
    },
    // 获取公司信息
    async fatchCompanyInfo() {
      const res = await getCompanyInfo(this.companyId)
      this.companyInfo = res.data
    },
    // 添加角色 弹窗
    showDialog() {
      this.isEdit = false
      this.dialogFormVisible = true
    },
    // 角色信息修改
    async handleEdit(index, row) {
      this.isEdit = true
      const res = await getRoleInfo(row.id)
      console.log(res)
      // 通过settingDialog的ref 修改form数据
      this.$refs.settingDialog.form = res.data
      this.dialogFormVisible = true
    },
    // 角色删除
    async handleDelete(index, row) {
      const isDel = await this.$messagebox
        .confirm('是否确认永久删除该角色', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .catch((err) => err)
      // 取消删除
      if (isDel === 'cancel') return this.$message('取消了删除')
      // 调用删除部门接口
      const res = await deleteRole(row.id)
      if (res.success) {
        this.$message.success(res.message)
        this.getRolesList()
      }
    },
    // 添加角色
    async addRole(form) {
      // 编辑操作
      if (this.isEdit) {
        const res = await editRoleInfo(form)
        if (res.success) {
          this.$message.success(res.message)
          this.getRolesList()
        }
      }
      // 添加操作
      else {
        const res = await addSysRole(form)
        if (res.success) {
          this.$message.success(res.message)
          this.getRolesList()
        }
      }
    },
    // 每页条数修改
    handleSizeChange(val) {
      this.query.pagesize = val
      this.getRolesList()
    },
    // 当前页修改
    handleCurrentChange(val) {
      this.query.page = val
      this.getRolesList()
    },
  },
  computed: {
    ...mapGetters(['companyId']),
  },
  components: { SettingDialog },
}
</script>

<style lang="less" scoped>
.tab-pane {
  padding: 0 20px;
}
.add-btn {
  color: var(--themeColor);
}
.edit-btn {
  color: #fff;
  background-color: #e6a23c !important;
}
.danger-btn {
  background-color: #f56c6c !important;
}
.pagination {
  margin: 20px;
}
.warning {
  width: 42%;
  background-color: #9a60c9;
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  margin-left: 50px;
}
</style>
